<template>
  <div class="mail">
    <!-- 左边菜单栏 -->
    <div class="left_tabbar">
      <ul class="left_tabbar_content">
        <li
        @click="seletTabBar(-1)"
        :class="{tabBar_active:tabBar_active_index==-1}"
        >全部</li>
        <li
         @click="seletTabBar(index,val.id)"
          :class="{tabBar_active:tabBar_active_index==index}"
           v-for="(val,index) of goodsClassify" :key="index"
          >{{val.name}}</li>
      </ul>
    </div>
    <!-- 左边菜单栏结束 -->

    <!-- 中间商品列 -->
    <div class="shopList">
<!--      <div class="search">-->
<!--        <input type="text" placeholder="请输入产品名称" v-model="searchName">-->
<!--        <img src="../../../static/images/goodsDetails/search.png" alt=""  @click="search">-->
<!--      </div>-->
      <div class="shopList_item_wrapper" >
          <div class="shopList_item" v-for="(item,index) of goodsList" :key="index" @click="toGoodsDetail(item.id)">
            <div class="left">
              <div class="shopList_item_pic">
                <img :src="item.thumb_Url" alt="" lazy-load=true mode="aspectFill">
              </div>
            </div>
            <div class="right">
              <div class="shopList_item_name">
                {{item.name}}
              </div>
              <div class="shopList_item_count">
                月售{{item.sale_count}}
              </div>
              <div class="shopList_item_price">
                ￥{{item.s_price}}
              </div>
              <div class="shopList_item_icon" @click.stop="addCart(item)">
                <img src="../../../static/images/goodsDetails/icon_car.png" />
              </div>
              <div class="shopList_item_num" v-if="item.total_goods_num>0">{{item.total_goods_num}}</div>
            </div>

        </div>      
      </div>
      
    </div>
    <!-- 中间商品列借宿 -->
  </div>
</template>

<script>
import card from '@/components/card'
export default{
  name:'mail',
  data(){
    return{
      FileUrl: this.$base,
      goodsClassify:'',//获取的初始的产品列表数据
      goodsList:[],//商品数据
      tabBar_active_index:-1,
      searchName:'',
      cart_num: 0,
      page:1,
      id:''//商品分类id
    }
  },
  onLoad() {
    this.getGoodsClassify()//获取商品分类
    // this.getGoodsList()//获取商品数据
  },
  onShow(){
    if (wx.getStorageSync('toPage')){
      wx.removeStorageSync('toPage')
    }
    this.goodsList = [];
    let str = this.page;
    for (let i =0;i<str; i++) {
      this.page = i+1;
      this.getGoodsList()//获取商品数据
    }

  },
  onReachBottom(){
    this.page++;
    this.getGoodsList(this.id)
  },
     onShareAppMessage(){
     return {
      title: '波罗蛋在线商城',
      desc:'',
    }
  },
  methods: {
    seletTabBar(index,id){
      this.tabBar_active_index=index
      this.id=id
      this.goodsList=[]
      this.page=1;
      this.getGoodsList(id)
    },
    async getGoodsList(id,goods_name=''){
      wx.showLoading()
      let res=await this.$request.getData('/goods/getGoodsList',{classify_id:id,'goods_name':goods_name,limit:10,page:this.page,user_token:wx.getStorageSync('userToken'),shop_id:wx.getStorageSync('shop_id')||''})
      if(res.data.level=='success'){
        if (this.page == 1){
          this.goodsList = res.data.data
        } else {
          this.goodsList = this.goodsList.concat(res.data.data)
        }
        if (res.data.data.length==0&&this.page>1){
          this.page--;
        }
        this.cart_num = parseInt(res.data.total_goods_num);
        // res.data.data.forEach((val)=>{
        //   this.goodsList.push(val);
        // })
        wx.hideLoading()
      }
    },
    async getGoodsClassify(id){
      let res=await this.$request.getData('/goods/getGoodsClassify')
      if(res.data.level=='success'){
        this.goodsClassify=res.data.data
      }
    },
    async addCart(item){//添加到购物车
      const _this=this
      var userToken=wx.getStorageSync('userToken')
      let res=await this.$request.postData('/goods/addShopCart',{goods_id:item.id,num:1,user_token:userToken,goods_spu_id:item.default_goods_spu_id,shop_id:wx.getStorageSync('shop_id')||''})
      wx.showLoading()
      if(res.data.level=='success'){
        this.$currency.showToast('成功加入购物车','success',1500);
        // this.showModal=false;
        wx.hideLoading();
        _this.cart_num = parseInt(res.data.total_goods_num);
        _this.page = 1;
        _this.getGoodsList()

      }else{
        wx.hideLoading({success:function(){
            _this.$currency.showToast(res.data.message,'none',1500)
          }});

      }
    },
    search(){
      this.goodsList=[];
      this.getGoodsList('',this.searchName)
    },
    toGoodsDetail(id){
      wx.navigateTo({url:'/pages/goodsDetail/main?id='+id})
    }
  },
}

</script>

<style scoped lang="scss">
  @import "../../common/css/mixin";
.mail{
  background: #fff;
  width: 100vw;
  min-height: 100vh;
}

/* 左边导航栏 */
.left_tabbar{
  /*margin-top:2.5px;*/
  position: fixed;
  top:0;
  left:0;
  width:100px;
  min-height: 100vh;
  background: #f8f8f8;
}
.left_tabbar_content{
  width:100%;
}
.left_tabbar_content>li{
  width:100%;
  border-bottom:solid 1px #eeeeee;
  height: 40px;
  line-height: 40px;
  text-align: center;
}

.tabBar_active{
  border-right:2px solid red;
  background: #fff !important;
  color: red;
}


/* 中间商品栏 */
.shopList{
  margin-left:220rpx;
  width: calc(100vw - 220rpx);
  background: #fff;
}
.search{
  background: #fff;
  margin-bottom:5px;
  display: flex;
  height: 40px;
  align-items: center;
}
.search>input{
  flex:1;
  height:40px;
  text-indent: 10px;
}
.search>img{
  height: 25px;
  margin-right:20px;
  width:25px;
}
.shopList_item_wrapper{
  width:calc(100% - 10rpx);
  display: flex;
  flex-wrap: wrap;
  padding: 10rpx 0;
  justify-content: space-between;
}
.shopList_item{
  width:calc(100% - 10rpx);
  padding:20rpx 10rpx;
  background: #fff;
  @include flex(flex-start);
  flex-direction: row;
  border-bottom: 2rpx solid #eee;
  .left{
    width: 200rpx;
    height: 200rpx;
  }
  .right{
    width: calc(100% - 220rpx);
    height: 200rpx;
    padding: 0 10rpx;
    @include flex(center,flex-start);
    flex-direction: column;
    position: relative;
  }
}
.shopList_item_pic{
  width:100%;
  height: 100%;
}
.shopList_item_pic>img{
  width:100%;
  height: 100%;
  border-radius: 8rpx;
  overflow: hidden;
  /*height: 150px;*/
  /* height: 120px; 先给个固定高度，以后再改 */
}
.shopList_item_name{
  width:100%;
  @include ellipsis(2);
  max-height: 80rpx;
  line-height: 40rpx;
  margin-bottom: auto;
  /*margin:10px 0;*/
}
  .shopList_item_count{
    width:100%;
    @include ellipsis(1);
    height: 40rpx;
    line-height: 40rpx;
    font-size: 26rpx;
    color: #666666;
  }
  .shopList_item_price{
    margin-top: auto;
    width:100%;
    @include ellipsis(1);
    height: 60rpx;
    line-height: 60rpx;
    font-size: 32rpx;
    color: red;
  }
  .shopList_item_icon{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50rpx;
    height: 50rpx;
  }
  .shopList_item_num{
    position: absolute;
    bottom: 30rpx;
    right: 0;
    width: 25rpx;
    height: 25rpx;
    font-size: 20rpx;
    background: #e12317;
    border-radius: 360rpx;
    color: #ffffff;
    text-align: center;
    line-height: 25rpx;
  }
</style>
